﻿<!-- 2017-12-5 11:17:33 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title></title>

    <!--第三方lib-->
    <script type="text/javascript" src="../../lib/include-lib.js?time=20201005" libpath="../../lib/"
            include="jquery,font-awesome,bootstrap,layer,haoutil"></script>

    <link href="../../css/widget-win.css" rel="stylesheet" />
</head>


<body style="padding:5px;text-align:center;" title="提示：单击按钮激活对应功能,在地图上单击开始，绘制中单击增加点、双击结束。">
    <div class="btn-group" role="group">
        <button id="btn_measure_length" type="button" class="btn btn-primary  btn-sm">
            <span class="fa fa-line-chart" aria-hidden="true"></span> 长度
        </button>
        <button id="btn_measure_area" type="button" class="btn btn-primary  btn-sm">
            <span class="fa fa-area-chart" aria-hidden="true"></span> 面积
        </button>
        <!--<button id="btn_measure_height" type="button" class="btn btn-primary  btn-sm">
            <span class="fa fa-height-chart" aria-hidden="true"></span> 高度(简单)
        </button>-->
        <button id="btn_measure_supHeight" type="button" class="btn btn-primary  btn-sm">
            <span class="fa fa-height-chart" aria-hidden="true"></span> 高度
        </button>
        <button id="btn_measure_clear" type="button" class="btn btn-danger  btn-sm">
            <span class="fa fa-trash" aria-hidden="true"></span> 清除
        </button>
    </div>


    <div style="margin-top:5px;">
        <span style="font-size: 16px;padding-right:10px">单位</span>
        <select id="measure_length_danwei" class="form-control" style="width:140px">
            <option value="auto">自动</option>
            <option value="m">米</option>
            <option value="km">公里</option>
            <option value="mile">海里</option>
            <option value="zhang">丈</option>
        </select>
        <select id="measure_area_danwei" class="form-control" style="width:140px;display:none;">
            <option value="auto">自动</option>
            <option value="m">平方米</option>
            <option value="km">平方公里</option>
            <option value="mu">亩</option>
            <option value="ha">公顷</option>
        </select>
    </div>

    <div style="margin-top:5px;">
        <span id="lbl_measure_result" style="font-size: 16px;"></span>
    </div>


    <script>
        var thisWidget;
        var thisType = "";

        //当前页面业务
        function initWidgetView(_thisWidget) {
            thisWidget = _thisWidget;

            if (thisWidget.config&&thisWidget.config.style) {
                $("body").addClass(thisWidget.config.style);
            }

            $("#measure_area_danwei").val("auto"); //默认值
            $("#measure_length_danwei").val("auto"); //默认值



            $('#btn_measure_length').bind('click', function () {
                $("#lbl_measure_result").html("");
                $('#measure_area_danwei').hide();
                $('#measure_length_danwei').show();

                thisType = "length";
                lastVal = 0;
                thisWidget.drawPolyline({
                    unit: $('#measure_length_danwei').val(),
                    terrain: true,
                    calback: showResult
                });
            });

            $('#btn_measure_area').bind('click', function () {
                $("#lbl_measure_result").html("");
                $('#measure_length_danwei').hide();
                $('#measure_area_danwei').show();

                thisType = "area";
                lastVal = 0;
                thisWidget.drawPolygon({
                    unit: $('#measure_area_danwei').val(),
                    calback: showResult
                });
            });

            $('#btn_measure_height').bind('click', function () {
                $("#lbl_measure_result").html("");
                $('#measure_area_danwei').hide();
                $('#measure_length_danwei').show(); 

                thisType = "height";
                lastVal = 0;
                thisWidget.drawHeight({
                    unit: $('#measure_length_danwei').val(),
                    isSuper: false,
                    calback: showResult
                });
            });

            $('#btn_measure_supHeight').bind('click', function () {
                $("#lbl_measure_result").html("");
                $('#measure_area_danwei').hide();
                $('#measure_length_danwei').show();

                thisType = "super_height";
                lastVal = 0;
                thisWidget.drawHeight({
                    unit: $('#measure_length_danwei').val(),
                    isSuper: true,
                    calback: showResult
                });
            });

            $('#btn_measure_clear').bind('click', function () {
                $("#lbl_measure_result").html("");
                $('#measure_area_danwei').hide();
                $('#measure_length_danwei').show();

                thisType = "";
                lastVal = 0;
                thisWidget.clearDraw();
            });

            //更换单位
            $("#measure_length_danwei").change(function (e) {
                var danwei = $('#measure_length_danwei').val();
                thisWidget.updateUnit(thisType, danwei);
                 
                if (lastVal > 0) { 
                    var valstr = thisWidget.formatLength(lastVal, danwei);
                    showResult(valstr);
                }
            });
            $("#measure_area_danwei").change(function (e) {
                var danwei = $('#measure_area_danwei').val();
                thisWidget.updateUnit(thisType, danwei);
                 
                if (lastVal > 0) {
                    var valstr = thisWidget.formatArea(lastVal, danwei);
                    showResult(valstr);
                }
            });
        }

        var lastVal = 0;

        //从父页面调用
        function showResult(valstr, val) {
            if (val)
                lastVal = val;
            $("#lbl_measure_result").html(valstr);
        }
    </script>
</body>

</html>